<template>
  <div class="soubg">
    <div class="sou">
      <!--Begin 所在收货地区 Begin-->
      <span class="s_city_b">
        <span class="fl">送货至：</span>
        <span class="s_city">
          <span>{{ address }}</span>
          <div class="s_city_bg">
            <div class="s_city_t"></div>
            <div class="s_city_c">
              <h2>请选择所在的收货地区</h2>
              <table border="0" class="c_tab" style="width: 235px; margin-top: 10px" cellspacing="0" cellpadding="0">
                <tr>
                  <th>A</th>
                  <td class="c_h"><span @click="address = '安徽'">安徽</span><span @click="address = '澳门'">澳门</span></td>
                </tr>
                <tr>
                  <th>B</th>
                  <td class="c_h"><span @click="address = '北京'">北京</span></td>
                </tr>
                <tr>
                  <th>C</th>
                  <td class="c_h"><span @click="address = '重庆'">重庆</span></td>
                </tr>
                <tr>
                  <th>F</th>
                  <td class="c_h"><span @click="address = '福建'">福建</span></td>
                </tr>
                <tr>
                  <th>G</th>
                  <td class="c_h">
                    <span @click="address = '广东'">广东</span>
                    <span @click="address = '广西'">广西</span>
                    <span @click="address = '贵州'">贵州</span>
                    <span @click="address = '甘肃'">甘肃</span>
                  </td>
                </tr>
                <tr>
                  <th>H</th>
                  <td class="c_h">
                    <span @click="address = '河北'">河北</span>
                    <span @click="address = '河南'">河南</span>
                    <span @click="address = '黑龙江'">黑龙江</span>
                    <span @click="address = '海南'">海南</span>
                    <span @click="address = '湖北'">湖北</span>
                    <span @click="address = '湖南'">湖南</span>
                  </td>
                </tr>
                <tr>
                  <th>J</th>
                  <td class="c_h">
                    <span @click="address = '江苏'">江苏</span>
                    <span @click="address = '吉林'">吉林</span>
                    <span @click="address = '江西'">江西</span>
                  </td>
                </tr>
                <tr>
                  <th>L</th>
                  <td class="c_h"><span @click="address = '辽宁'">辽宁</span></td>
                </tr>
                <tr>
                  <th>N</th>
                  <td class="c_h"><span @click="address = '内蒙古'">内蒙古</span><span @click="address = '宁夏'">宁夏</span></td>
                </tr>
                <tr>
                  <th>Q</th>
                  <td class="c_h"><span @click="address = '青海'">青海</span></td>
                </tr>
                <tr>
                  <th>S</th>
                  <td class="c_h">
                    <span @click="address = '上海'">上海</span>
                    <span @click="address = '山东'">山东</span>
                    <span @click="address = '山西'">山西</span>
                    <span @click="address = '四川'">四川</span>
                    <span @click="address = '陕西'">陕西</span>
                  </td>
                </tr>
                <tr>
                  <th>T</th>
                  <td class="c_h" @click="address = '台湾'"><span>台湾</span><span @click="address = '天津'">天津</span></td>
                </tr>
                <tr>
                  <th>X</th>
                  <td class="c_h">
                    <span @click="address = '西藏'">西藏</span>
                    <span @click="address = '香港'">香港</span>
                    <span @click="address = '新疆'">新疆</span>
                  </td>
                </tr>
                <tr>
                  <th>Y</th>
                  <td class="c_h" @click="address = '云南'"><span>云南</span></td>
                </tr>
                <tr>
                  <th>Z</th>
                  <td class="c_h" @click="address = '浙江'"><span>浙江</span></td>
                </tr>
              </table>
            </div>
          </div>
        </span>
      </span>
      <!--End 所在收货地区 End-->
      <span class="fr">
        <span class="fl">
          你好，<span v-show="userName == null || userName == ''">请<a href="" @click.prevent="toLogin()">登录</a></span>
          <span v-show="userName != '' && userName != null" style="color:#ff4e00">{{ userName }}</span>
          &nbsp;
          <span v-show="userName == null || userName == ''"><a href="" @click.prevent="toRegister()"
              style="color: #ff4e00">免费注册</a>&nbsp;&nbsp;</span>
          <span><a v-show="userName != '' && userName != null" href="" @click.prevent="toLoginOut()"
              style="color: #ff4e00">退出登录</a>&nbsp;|&nbsp;</span>
          <a href="#" @click="toBuyCar()">我的购物车</a>&nbsp;|
        </span>
        <span class="ss">
          <div class="ss_list">
            <a href="#" @click.prevent="toUserCollect()">收藏夹</a>
            <!-- <div class="ss_list_bg">
              <div class="s_city_t"></div>
              <div class="ss_list_c">
   
              </div>
            </div> -->
          </div>
          <div class="ss_list">
            <a href="#" @click.prevent="toUser()">客户服务</a>
            <div class="ss_list_bg">
              <div class="s_city_t"></div>
              <div class="ss_list_c" v-show="userName != null && userName != ''">
                <ul>
                  <li><a href="#" @click.prevent="toUserInfo()">用户信息</a></li>
                  <li><a href="#" @click.prevent="toUserAddress()">收货地址</a></li>
                  <li><a href="#" @click.prevent="toUserOrder()">我的订单</a></li>
                  <li><a href="#" @click.prevent="toUserCollect()">我的收藏</a></li>
                </ul>
              </div>
            </div>
          </div>

          <div class="ss_list" v-show="userType == 1">
            <a href="#" @click="toadmin()">管理中心</a>
            <div class="ss_list_bg">
              <div class="s_city_t"></div>
              <div class="ss_list_c">
                <ul>
                  <li><a href="#" @click.prevent="toAdminNews()">资讯管理</a></li>
                  <li><a href="#" @click.prevent="toAdminProduct()">商品管理</a></li>
                  <li><a href="#" @click.prevent="toAdminOrder()">订单管理</a></li>
                  <li><a href="#" @click.prevent="toAdminUser()">用户管理</a></li>
                </ul>
              </div>
            </div>
          </div>
        </span>
        <span class="fl">|&nbsp;关注我们：</span>
        <span class="s_sh">
          <a href="#" class="sh1">新浪</a>
          <a href="#" class="sh2">微信</a>
        </span>
        <span class="fr">|&nbsp;<a href="#">手机版&nbsp;<img src="@/assets/images/s_tel.png"
              align="absmiddle" /></a></span>
      </span>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'HeaderNav',
  data() {
    return {
      address: '北京',
      userType: '',
      userName: ''
    }
  },
  methods: {
    ...mapMutations(['setShowPage']),
    toLogin: function () {
      console.log('=========================')
      this.setShowPage(1)
      this.$router.push("/login").catch(() => { })
    },
    toRegister() {
      this.setShowPage(1)
      this.$router.push('/regist')
    }
    , toadmin() {
      this.$router.push('/admin').catch(() => { })
    }
    , toAdminNews() {
      this.$router.push({
        path: '/admin',
        query: { tab: 'news' }
      }).catch(() => { });
    }
    , toAdminProduct() {
      this.$router.push({
        path: '/admin',
        query: { tab: 'product' }
      }).catch(() => { });
    }
    , toAdminOrder() {
      this.$router.push({
        path: '/admin',
        query: {
          tab: 'order',
          scope: 'all'
        }
      }).catch(() => { });
    }
    , toAdminUser() {
      this.$router.push({
        path: '/admin',
        query: { tab: 'user' }
      }).catch(() => { });
    }

    // 前往客户服务页面
    , toUser() {
      this.setShowPage(1)
      this.$router.push({
        path: '/user'
      }).catch(() => { });
    }
    , toUserInfo() {
      this.$router.push({
        path: '/user',
        query: { tab: 'info' }
      }).catch(() => { });
    }
    , toUserAddress() {
      this.$router.push({
        path: '/user',
        query: {
          tab: 'address'
        }
      }).catch(() => { });
    }
    , toUserOrder() {
      this.$router.push({
        path: '/user',
        query: {
          tab: 'order',
          scope: 'self'
        }
      }).catch(() => { });
    }
    , toUserCollect() {
      this.$router.push({
        path: '/user',
        query: { tab: 'collect' }
      }).catch(() => { });
    },
    toBuyCar() {
      this.$router.push({
        path: '/buycar',
      }).catch(() => { });
    }
    // 退出登录
    , toLoginOut() {
      window.sessionStorage.removeItem('token');
      window.sessionStorage.removeItem('userId');
      window.sessionStorage.removeItem('userType');
      window.sessionStorage.removeItem('userName');
      alert('退出成功！')
      this.$router.push('/login');
    }
  },
  mounted() {
    this.userName = window.sessionStorage.getItem('userName')
    this.userType = window.sessionStorage.getItem('userType')
  }

};
</script>

<style></style>